export const spreadEffectIndexOptions = (options) => ({
  grid: {
    left: '6%',
    right: '6%',
    bottom: '10%',
  },
  legend: {
    top: '4%',
    // icon: 'circle'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: { type: 'solid' },
    },
  },
  toolbox: {
    show: true,
    right: '4%',
    top: '4%',
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    data: options.xData,
    boundaryGap: false,
  },
  yAxis: [
    {
      name: '',
      type: 'value',
    },
    /* {
      name: '阅读量/篇次',
      type: 'value',
    }, */
  ],
  series: [
    {
      name: '全平台',
      data: options.allPlatformData,
      type: 'line',
      // smooth: true,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' },
        ],
      },
      color: '#1764ce',
    },
    {
      name: '池内',
      // yAxisIndex: 1,
      data: options.entryData,
      type: 'line',
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max',
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max',
              },
              type: 'max',
              name: '最高点',
            },
          ],
        ],
      },
      // smooth: true,
      color: '#52C41A',
    },
  ],
})

export const platformContributeOptions = (options) => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a}<br />{b}: {c}（{d}%）',
  },
  legend: {
    top: '10%',
    left: 'center',
  },
  toolbox: {
    right: '2%',
    top: '2%',
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  series: [
    {
      name: '平台贡献率',
      type: 'pie',
      radius: ['35%', '65%'],
      center: ['50%', '55%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 16,
        borderWidth: 4,
        borderColor: '#fff',
      },
      /* label: {
        show: true,
      }, */
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
          // position: 'center'
        },
      },
      labelLine: {
        show: true,
      },
      data: options.data,
    },
  ],
})

export const accountContributeOptions = (options) => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a}<br />{b}: {c}（{d}%）',
  },
  legend: {
    top: '5%',
    left: '2%',
    orient: 'vertical',
    // left: 'left',
  },
  series: [
    {
      name: '账号贡献率',
      type: 'pie',
      radius: ['0', '65%'],
      avoidLabelOverlap: false,
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
          // position: 'center'
        },
      },
      labelLine: {
        show: true,
      },
      data: options.data,
    },
  ],
})

export const spreadTrendOptions = (options) => ({
  grid: {
    left: '6%',
    top: '16%',
  },
  legend: {
    bottom: '10',
    icon: 'circle',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: { type: 'solid' },
    },
    formatter(pam) {
      return `<p>${pam[0].axisValue}</p>
              <p class="mt5">
                ${pam.map((p) => p.marker + p.seriesName + ' ' + p.value).join(' ')}
              </p>
                `
      {
        /* 
        ${pam[0].marker} ${pam[0].seriesName} ${pam[0].value}
        ${pam[1].marker} ${pam[1].seriesName} ${pam[1].value}
        <p class="mt5">习近平向全世界互联网大会xxxxxxxxxxxx</p>
          <div class="d-flex flex-ju-sb f12">
            <span>2022-07-12 18:11:34</span>
            <span>2123.34</span>
          </div> */
      }
    },
  },
  toolbox: {
    show: true,
    right: '0%',
    top: '4%',
    feature: {
      magicType: { type: ['line', 'bar'] },
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    data: options.xData,
    boundaryGap: false,
  },
  yAxis: [
    {
      name: '转载数/篇次',
      type: 'value',
    },
    {
      name: '阅读量/篇次',
      type: 'value',
    },
  ],
  series: [
    {
      name: '转载数',
      data: options.reshipData,
      type: 'line',
      smooth: true,
      color: '#DE3F07',
    },
    {
      name: '阅读量',
      yAxisIndex: 1,
      data: options.readData,
      type: 'line',
      smooth: true,
      color: '#1764CE',
    },
  ],
})

const nameMap = new Map([
  ['新疆维吾尔自治区', '新疆'],
  ['西藏自治区', '西藏'],
  ['宁夏回族自治区', '宁夏'],
  ['香港特别行政区', '香港'],
  ['澳门特别行政区', '澳门'],
  ['南海诸岛', '南海'],
])
const mapLabelNameFormat = (p) => {
  const n = p.name
  if (nameMap.has(n)) return nameMap.get(n)
  return (n && n.slice(0, 3).replace(/市|省/, '')) || ''
}

export const hotReportAreaOptions = (options = {}) => ({
  visualMap: [
    {
      min: options.minValue || 0,
      max: options.maxValue || 100,
      left: 'left',
      top: 'bottom',
      inRange: {
        color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096'],
      },
      text: ['高', '低'],
      calculable: false,
      orient: 'vertical',
      inRange: {
        color: ['#e0ffff', '#66B0EE'],
        symbolSize: [100, 100],
      },
    },
  ],
  tooltip: {
    show: false,
  },
  geo: [
    {
      map: 'china',
      show: false,
      /* regions: [
        {
          name: '南海诸岛',
          value: 0,
          itemStyle: {
            opacity: 0,
            label: {
              show: false,
            },
          },
        },
      ], */
    },
  ],
  series: [
    {
      type: 'map',
      map: 'china',
      width: '80%',
      top: '0%',
      name: '报道数',
      // bottom: '0%',
      // aspectScale: 0.75,
      tooltip: {
        show: true,
        formatter(pam) {
          // console.log(pam)
          const value = Number.isNaN(pam.value) ? 0 : pam.value
          return `<span>${pam.seriesName}</span><p>${pam.name}：${value}</p>`
        },
      },
      label: {
        show: true,
        formatter: mapLabelNameFormat,
        // position: 'top',
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      itemStyle: {
        borderColor: '#2FABD9',
        areaColor: '#DEFEFD',
      },
      data: options.data,
    },
  ],
})
